<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        display: flex;
      }
      #A,
      #B {
        width: 300px;
        height: 500px;
        background-color: #d7a5a5;
        border: dashed 2px rgb(196, 109, 196);
        text-align: center;
        color: rgb(159, 36, 36);
      }
      p {
        background-color: burlywood;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div id="A" draggable="true">
      <p>周杰伦</p>
      <p>陈冠希</p>
      <p>尊龙</p>
      <p>道枝骏佑</p>
      <p>宋亚轩</p>
      <p>黄宗泽</p>
      <p>周星驰</p>
    </div>
    <div id="B" draggable="true"></div>
  </body>
  <script>
    window.onload = function () {
      var A = document.querySelector("#A");
      var B = document.querySelector("#B");
      var pa = document.querySelectorAll("#A p");
      var pb = document.querySelectorAll("#B p");
      pa.forEach(function (p, index) {
        p.id = "p" + (index + 1);
        p.setAttribute("draggable", "true");
      });

      pa.forEach(function (p) {
        p.addEventListener("dragstart", function (e) {
          e.dataTransfer.setData("ps", this.id);
        });
      });
      pb.forEach(function (p) {
        p.addEventListener("dragstart", function (e) {
          e.dataTransfer.setData("ps", this.id);
        });
      });
      B.addEventListener("dragover", function (e) {
        // 取消阻止默认
        e.preventDefault();
      });
      A.addEventListener("dragover", function (e) {
        // 取消阻止默认
        e.preventDefault();
      });
      B.addEventListener("drop", function (e) {
        e.preventDefault();
        // 放置元素
        var id = e.dataTransfer.getData("ps");
        // 找到对应的元素
        var elment = document.getElementById(id);
        B.appendChild(elment);
      });
      A.addEventListener("drop", function (e) {
        e.preventDefault();
        // 放置元素
        var id = e.dataTransfer.getData("ps");
        // 找到对应的元素
        var elment = document.getElementById(id);
        A.appendChild(elment);
      });
    };
  </script>
</html>
